<template>
  <div class="artifact">

    <section>
      <div>
        <img :src=element.src class="img" alt=""/>
      </div>
    </section>
    <section class="words-section">
      <div>

          <li v-for="art in element.words" :key="art.id">
            {{ art.text }}
          </li>

      </div>
    </section>
  </div>
</template>

<script>
export default {
  props: ['element'],
  data() {
    return {}
  },
  created() {
    // 在组件创建完成之后 进行回调函数的注册
  },
  mounted() {
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.artifact {
  display: flex;
  width: 100%;
  height: 5%;
  .img {

    width: 80%;
    height: 100%;
  }

  .words-section {
    font-size: 0.6em;
    width: 60%;
    height: 100%;
    margin-bottom: 6px;
  }
}


</style>
